<template>
    <div>
        <p>
            count:{{count}},{{state.count}},{{doubleCount}}

        </p>
        <p>
            student:{{student}}
        </p>
        <p>
            students:{{state.students}}
        </p>

        <input type="text" v-model="count">
        <input type="text" v-model="state.count">
        <input type="button" value="ok" @click="handleClick">
    </div>
</template>

<script setup>
import {ref,reactive,computed} from 'vue';

const count = ref(0);
const student = ref({name:"张飞",age:30});

const state = reactive({count:0,students:[],student:{}});

const doubleCount = computed(() => count.value * 2);

function handleClick(){
    console.log("count",count.value);
    console.log("state",state);
    // count++;
    // student.value = {...student.value,age:50,gender:"男"};
    // state = {...state,count:100}
    // state.count = 100;
    count.value++;
    state.students = [...state.students,{name:"张飞",age:40}]
}

</script>

<style>

</style>